.breadcrumb {
    white-space: nowrap;
    overflow: hidden;
    overflow-x: auto;

    & ul {
        user-select: none;
    }
    & li {
        list-style: none;
        display: inline-block;

        &.is-active a {
            color: gray(74);
            pointer-events: none;
        }

        &:not(:last-child)::after {
            content: '/';
            margin: .5em;
        }

        & .icon {
            margin-left: .3em;
            margin-right: .3em;
        }
    }

    &.is-centered {
        text-align: center;
    }

    &.is-right {
        text-align: right;
    }

    &.is-small {
        font-size: ms(0)rem;
    }

    &.is-medium {
        font-size: ms(2)rem;
    }

    &.is-large {
        font-size: ms(3)rem;
    }
}
